
<template>
  <div v-bind:id="id" v-bind:data="data"></div>
</template>

<script>
export default {
  name: "lineGraph",
  data() {
    return {
      ChartLineGraph: null,
    };
  },
  //  深度监听 父组件刚开始没有值，只有图标的配置项
  //  父组件ajax请求后改变数据的值，传递过来，图标已生成，监听传过来的值的改变
  // deep:true.深度监听，确保data中子项修改也能监听到。写法参考：https://cn.vuejs.org/v2/api/#watch
  watch: {
    data: {
      // eslint-disable-next-line no-unused-vars
      handler(newvalue, oldvalue) {
        this.drawLineGraph(this.id, newvalue);
      },
      deep: true,
    },
  },
  // id魏容器的id   data为配置项   clickOnOff点击事件的开关   params参数
  props: ["id", "data", "clickOnOff", "params"],
  mounted() {
    this.drawLineGraph(this.id, this.data, this.clickOnOff, this.params);
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    drawLineGraph(id, data, clickOnOff, params) {
      let _this = this;
      let myChart = document.getElementById(id);
      this.ChartLineGraph = this.$echarts.init(myChart);
      this.ChartLineGraph.setOption(data);
      // clickOnOff此属性的值为true或false
      if (clickOnOff) {
        // eslint-disable-next-line no-unused-vars
        this.ChartLineGraph.on("click", function (param) {
          alert("点击事件");
          // 控制台打印数据的名称
          // console.log(params.name);
        });
      }
      window.addEventListener("resize", function () {
        _this.ChartLineGraph.resize();
      });
    },
  },
  beforeDestroy() {
    if (this.ChartLineGraph) {
      this.ChartLineGraph.dispose();
    }
  },
};
</script>

<style scoped>
</style>
